<!-- subpkg_consult/room/index.vue -->
<template>
  <view class="room-page">
    <scroll-view
      refresher-enabled
      refresher-background="#f2f2f2"
      scroll-y
      style="flex: 1; overflow: hidden"
    >
      <view class="message-container">
        <!-- 此处将来填充更多代码... -->
        <!-- <div class="room">聊天室</div> -->
        <room-status
          :status="orderDetail.status"
          :statusValue="orderDetail.statusValue"
          :countdown="orderDetail.countdown"
        ></room-status>
        <view v-for="item in messageList" :key="item.id">
          <view v-if="item.msgType === 31 || item.msgType === 32">
            <notify-info :type="item.msgType" :content="item.msg?.content"></notify-info>
          </view>
          <view v-else-if="item.msgType === 21">
            <patient-info :info="item.msg?.consultRecord"></patient-info>
          </view>
          <view v-else-if="item.msgType === 1">
            <message-info :info="item" :type="item.msgType"></message-info>
          </view>
          <view v-else-if="item.msgType === 4">图片消息</view>
          <view v-else-if="item.msgType === 22">处方消息</view>
          <view v-else="item.msgType === 1">其他消息</view>
        </view>
      </view>
    </scroll-view>

    <!-- 发送消息 -->
    <view class="message-bar">
      <template v-if="true">
        <uni-easyinput
          :disabled="orderDetail.status !== 3"
          :clearable="false"
          :input-border="false"
          placeholder-style="font-size: 32rpx; color: #c3c3c5;"
          placeholder="问医生"
          v-model="content"
          @confirm="onInputConfirm"
        />
        <view class="image-button">
          <uni-icons size="40" color="#979797" type="image"></uni-icons>
        </view>
      </template>
      <button v-else class="uni-button">咨询其它医生</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  const props = defineProps<{ orderId: string; payResult: string }>()
  import { orderDetailApi } from '@/apis/consult'
  import { useUserStore } from '@/stores/user'
  import type { OrderDetail } from '@/types/consult'
  import type { MsgData, MsgItem } from '@/types/room'
  import { io } from 'socket.io-client'
  import type { Socket } from 'socket.io-client'
  import { ref } from 'vue'

  // https://consult-api.itheima.net
  const store = useUserStore()
  const socket: Socket = io('https://consult-api.itheima.net', {
    auth: { token: 'Bearer ' + store.user.token },
    query: { orderId: props.orderId },
    transports: ['websocket', 'polling'],
    timeout: 5000,
  })
  socket.on('connect', () => {
    // 建立连接成功
    console.log('连接建立成功')
  })

  socket.on('error', (event) => {
    // 错误异常消息
    console.log('出现错误')
  })

  socket.on('disconnect', () => {
    // 已经断开连接
    console.log('断开连接')
  })
  socket.on('chatMsgList', (res: MsgData) => {
    console.log(res)
    res.data?.forEach((item) => {
      messageList.value.push(...item.items!)
    })
  })

  const orderDetail = ref({} as OrderDetail)
  const getOrderDetail = async () => {
    const res = await orderDetailApi(props.orderId)
    orderDetail.value = res
    console.log(res)
  }
  getOrderDetail()
  //实时检测订单状态
  socket.on('statusChange', () => {
    getOrderDetail()
  })
  const messageList = ref<MsgItem[]>([])
  socket.on('receiveChatMsg', (res: MsgItem) => {
    console.log('receiveChatMsg', res)
    messageList.value.push(res)
  })
  const content = ref('')
  // 发送文字消息
  const onInputConfirm = () => {
    // 发送消息
    socket.emit('sendChatMsg', {
      // 当前登录用户的ID
      from: store.$id,
      to: orderDetail.value?.docInfo?.id,
      msgType: 1,
      msg: {
        content: content.value,
      },
    })
    // 清空表单
    content.value = ''
  }
</script>

<style lang="scss">
  @import './index.scss';
</style>
